<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-select v-model="searInfo.registered" style="width:202px" clearable placeholder="是否转化">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="searInfo.userId" style="width:202px" clearable placeholder="负责人">
          <el-option
            v-for="item in usersArr"
            :key="item.id"
            :label="item.userName"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="searInfo.tcContactPhone"
          style="width:202px"
          placeholder="联系电话"
          clearable
        />
        <el-button type="primary" @click="searchInfoMation">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.allocationCustomer"
        type="primary"
        class="right"
        @click="distribution"
      >分配负责人</el-button>
    </div>
    <el-table ref="table" :data="tableData" border stripe :height="this.$getTableHeight">
      <el-table-column type="index" width="50" />
      <el-table-column label="客户名称">
        <template slot-scope="scope">
          <span
            class="blue"
            @click="changeActive(scope.row.tcId)"
          >{{ scope.row.tcId ? scope.row.tcName : '&nbsp;' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tcContactPhone" label="联系电话" />
      <el-table-column prop="tcFollowUserName" label="负责人" />
      <el-table-column label="是否转化">
        <template
          slot-scope="scope"
        >{{ scope.row.registered === true ? '是' :scope.row.registered === false ? "否" :"" }}</template>
      </el-table-column>
      <el-table-column prop="tcAddTime" label="添加时间" />
      <el-table-column prop="tcRemark" label="备注" />
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.tcId">
            <span
              v-if="accreditChildren.deleteCustomer"
              class="_delete"
              @click="deleter(scope.row)"
            >删除</span>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :accredit-children="accreditChildren"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <el-dialog title="分配负责人" center :visible.sync="outerVisible">
      <p>未分配人数：{{ this.userCount }}</p>
      <el-table :data="userDTOS" style="width: 100%">
        <el-table-column prop="userName" label="用户名" />
        <el-table-column prop="allocations" label="已分配" />
        <el-table-column label="是否为其分配">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" />
          </template>
        </el-table-column>
        <el-table-column label="分配人数">
          <template slot-scope="scope">
            <el-input v-model="scope.row.number" placeholder="分配人数" />
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="操作结果" center :visible.sync="innerVisible" append-to-body>
        <div style="line-height:30px;">
          <p v-for="(item,index) in results" :key="index">{{ item }}</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeAll">取 消</el-button>
          <el-button type="primary" @click="closeAll">确 定</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAllocation">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '~/components/commom/pagination';
import detail from '~/components/prospectiveCustomer/detail';
import {
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  reduceArr,
  createDics,
  changeTableHeight
} from '~/utils/util';
export default {
  components: {
    Pagination,
    detail
  },
  data() {
    return {
      userDTOS: [],
      userCount: 0,
      outerVisible: false,
      innerVisible: false,
      dialogVisible: false,
      updateRight: false,
      active: false,
      jumpId: '',
      options: [
        {
          value: true,
          label: '是'
        },
        {
          value: false,
          label: '否'
        }
      ],
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      },
      searInfo: {
        registered: null,
        tcContactPhone: null,
        userId: null
      },
      copysearInfo: {
        registered: null,
        tcContactPhone: null,
        userId: null
      },
      accreditChildren: {},
      tableData: [],
      totalCount: 0,
      usersArr: [],
      results: [],
      accreditArr: [],
      accreditChildren: {}
    }
  },
  mounted() {
    this.getInitTableData()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    closeAll() {
      this.innerVisible = false
      this.outerVisible = false
    },
    submitAllocation() {
      let count = 0
      this.userDTOS.forEach(v => {
        if (v.checked) {
          count += Number(v.number)
        }
      })
      if (Number(count) > Number(this.userCount)) {
        this.$message.error('分配人数超过总人数')
        return false
      }
      count > 0
        ? this.$post({
          url: '/manage/customers/editCustomers',
          data: this.getPostData()
        }).then(res => {
          this.results = res.results
            this.innerVisible = true
          })
        : '';
    },
    getPostData() {
      const executor = {}
      let length = 0
      this.userDTOS.forEach(v => {
        if (v.checked) {
          length += Number(v.number)
          executor[`${v.userName}-${v.id}`] = Number(v.number)
        }
      })
      return { executor, length }
    },
    distribution() {
      this.$get({
        url: '/manage/customers/loadAllocation'
      }).then(res => {
        this.outerVisible = true
        this.userDTOS = res.userDTOS
        this.userCount = res.count
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.updateRight = !this.updateRight
      this.searchInfoMation('no')
    },
    clearJumpId() {
      this.active = false
      this.jumpId = null
    },
    openDialog() {
      this.isCreate = false
      this.dialogVisible = true
    },
    changeActive(id) {
      this.active = true
      this.jumpId = id
    },
    deleter(row) {
      const that = this
      _deleteMethods('/manage/customers/deletedTbCustomers', row, that).then(
        () => {
          that.searchInfoMation('no')
        }
      )
    },
    getInitTableData() {
      this.$post({
        url: '/manage/customers/getTbCustomers',
        data: Object.assign({}, { page: this.page }, this.searInfo)
      }).then(res => {
        this.tableData = res.items.items
        this.totalCount = res.items.totalCount
        this.usersArr = res.users
        changeTableHeight(this)
      })
    },
    changeTableData(res) {
      const that = this
      _changeTable('/manage/customers/getTbCustomers', res, that)
    },
    searchInfoMation(res) {
      this.copysearInfo = JSON.parse(JSON.stringify(this.searInfo))
      const result = _searchInfo(res, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copysearInfo)
      this.changeTableData(result)
    }
  }
}
</script>
<style lang="scss">
</style>
